<template>
	<div class="person-profile profile acea-row row-between-wrapper">
		<div id="topBar" class="createTopBar">
			<div class="linkBar">
				<a href="javascript:void(0);" class="profileTitle">
					<b>服务对象个人档案</b>
				</a>
				<div class="linkList">
					<a href="javascript:void(0);" class="topBarLink">
						<a-icon class="console-icon" type="home"></a-icon>操作日志
					</a>
					<a href="javascript:void(0);" class="topBarLink">操作日志</a>
					<a href="javascript:void(0);" class="topBarLink">操作日志</a>
				</div>
			</div>
			<div class="stepBar"></div>
		</div>
		<div class="createContainer">
			<div class="pageContainer">
				<!---->
				<div class="page-main">
					<a-card title="个人信息">
						
					</a-card>
					<a-card title="家庭情况">
						
					</a-card>
					<a-card title="经济情况">
						
					</a-card>
				</div>
				<div class="page-side">
					<a-card title="历史服务档案">
						<a-collapse v-model="historyActiveKey">
							<a-collapse-panel>
								<span slot="header">咨询服务 [已完成]</span>
								<span slot="extra">
									<a-icon type="setting" @click="handleClick" />
									<a-divider type="vertical" />
									<a-icon type="edit" />
									<a-divider type="vertical" />
									<a-icon type="printer" />
								</span>
								<a-descriptions bordered layout="vertical" size="small">
									<a-descriptions-item label="服务编号">
										XX-E-AE86
									</a-descriptions-item>
									<a-descriptions-item label="问题性质">
										经济援助
									</a-descriptions-item>
									<a-descriptions-item label="服务状态">
										关闭
									</a-descriptions-item>
									<a-descriptions-item label="服务时段">
										20180110-20201010
									</a-descriptions-item>
									<a-descriptions-item label="工作员">
										张三
									</a-descriptions-item>
								</a-descriptions>
							</a-collapse-panel>
							<a-collapse-panel>
								<span slot="header">个案服务 - 开案 [进行中]</span>

								<span slot="extra">
									<a-icon type="setting" @click="handleClick" />
									<a-divider type="vertical" />
									<a-icon type="edit" />
								</span>
								<a-card>
									<p>资料待填写</p>
								</a-card>
							</a-collapse-panel>
							<a-collapse-panel disabled>
								<span slot="header">长期探访服务 [申请中，待督导审核]</span>
								<a-icon slot="extra" type="setting" @click="handleClick" />

							</a-collapse-panel>
						</a-collapse>
					</a-card>
					<a-card title="个人资料上传">
						<a-table :columns="columns" :data-source="data" :pagination="false">
							<span slot="action" slot-scope="text, record">
								<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
									查看
								</a-button>
								<a-button size="small" style="margin-right: 10px;" type="danger">
									删除
								</a-button>
							</span>
						</a-table>
						<a-form-model-item label="上传文件">
							<a-upload-dragger name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
								<p class="ant-upload-drag-icon">
									<a-icon type="inbox" />
								</p>
								<p class="ant-upload-text">
									点击上传或者拖拽文件到此
								</p>
								<p class="ant-upload-hint">
									支持单个或批量上传
								</p>
							</a-upload-dragger>
						</a-form-model-item>
					</a-card>
					<a-card title="历史记录">
						<a-table :columns="columns2" :data-source="data" :pagination="false">
						</a-table>
					</a-card>
				</div>

				<!---->
			</div>
			<div class="subcontrolSection">
				<div class="subcontrolSection-inner">
					<div class="infoArea">
						<div class="info-view">
							<div class="inline info-view-period">
								<div class="info-view-list">
									<div class="info-view-item">
										<span class="info-view-name">对象名：</span>
										<span class="info-view-content">张凯悦</span>
										<div class="info-view-code-area">
											<span class="code-area inline">档案编号：ACDCDKJRAL991KDCA</span>
										</div>
									</div>
									<div class="info-view-item">
										<span class="info-view-name">联系电话：</span>
										<span class="info-view-content">13000000000</span>
										<div class="info-view-code-area">
											<span class="code-area inline">项目：阿里困境儿童帮扶计划</span>
										</div>
									</div>
								</div>
							</div>
							<!--
							<div>项目信息</div>
							<div>档案编号</div>
							<div>联系电话</div>
							-->
						</div>
					</div>
					<span class="actionArea">
						<div class="fl">
							<a-button>相关审核记录</a-button>
						</div>
						<div class="inline">
							<a-button>保存/更新</a-button>
						</div>
						<div class="inline">
							<a-button>打印</a-button>
						</div>
						<div class="inline">
							<a-button>返回</a-button>
						</div>
					</span>
				</div>
			</div>
		</div>

		<a-drawer title="这个标题动态变换为查看的东西" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
		</a-drawer>
	</div>
</template>

<script>
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import sidebar from "../../../components/sideBar";
	import moment from 'moment';
	import {
		getGroup,
		getWelfare
	} from '@/api/common.js'
	import {
		getform
	} from '@/api/user.js'
	const columns = [{
			title: '资料名字',
			dataIndex: 'name',
			align: 'center',
		},
		{
			title: '上传时间',
			dataIndex: 'address',
			align: 'center',
		},
		{
			title: '上传者',
			dataIndex: 'userName',
			align: 'center',
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: {
				customRender: 'action'
			},
			align: 'center',
		},
	];
	const columns2 = [{
			title: '更新时间',
			dataIndex: 'address',
			align: 'center',
		},
		{
			title: '更新人',
			dataIndex: 'userName',
			align: 'center',
		}
	];
	const data = [];
	for (let i = 0; i < 2; i++) {
		data.push({
			name: `这是资料 ${i}`,
			address: `2020年10月7日`,
			userName: `张三`,
		});
	}
	export default {
		data() {
			return {
				locale,
				historyActiveKey: [],
				createCurrent: [],
				tab: 0,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				form: {
					resource: '1',
					sex: '1',
					weiji: '1',
					pingfen: '1',
					domains: [{

					}],
					domains2: [{

					}]
				},
				Top: false,
				rules: {},
				visible: false,
				data,
				columns,
				columns2,
				selectedRowKeys: [],
				groups: [],
				welfares: []
			}
		},
		components:{
			sidebar
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
		},
		created() {
			this.getAllGroup();
			this.getAllWelfare();
			this.getForm();
		},
		methods: {
			getForm(){
				getform({type:0}).then(res=>{
					console.log(res)
				})
			},
			handleSubmit() {

			},
			getScroll(event) {
				console.log(event.target.scrollTop)
			},
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
			activeKey(key) {
				console.log(key);
			},
			creat() {
				this.visible = true;
			},
			onClose() {
				this.visible = false;
			},
			removeDomain(item) {
				let index = this.form.domains.indexOf(item);
				if (index !== -1) {
					this.form.domains.splice(index, 1);
				}
			},
			addDomain() {
				this.form.domains.push({
					value: '',
					key: Date.now(),
				});
			},
			removeDomain2(item) {
				let index = this.form.domains2.indexOf(item);
				if (index !== -1) {
					this.form.domains2.splice(index, 1);
				}
			},
			addDomain2() {
				this.form.domains2.push({
					value: '',
					key: Date.now(),
				});
			},
			success() {
				this.$message.success('提交成功，请等待审核');
			},
			getAllGroup() {
				getGroup().then(res => {
					console.log(res)
					this.groups = res.data
				});
			},
			getAllWelfare() {
				getWelfare().then(res => {
					this.welfares = res.data
				})
			}
		}
	}
</script>

<style>
	.border .ant-table-thead>tr>th,
	.ant-table-tbody>tr>td {
		padding: 5px;
	}

	.lishiItem {
		width: 150px;
		height: 180px;
		margin-right: 10px;
	}

	.lishiItem:nth-child(3n) {
		margin-right: 0;
	}

	.hand {
		cursor: pointer;
	}

	.disableHand {
		cursor: no-drop;
	}

	.dashed {
		border-style: dashed;
	}
</style>
